import React from "react";
import { 
  Tabs, 
  TabList, 
  Tab, 
  TabPanel, 
  TabPanels, 
  Box, 
  Image,
  useColorModeValue } from '@chakra-ui/core'
import SignUp from './SignUp'
import SignIn from './SignIn'
import chakraUILight from '../assets/images/chakra-ui-light.png'
import chakraUIDark from '../assets/images/chakra-ui-dark.png'

export default function Form () {
  // 给背景颜色设置模式变化
  const bgColor = useColorModeValue('gray.200', 'gray.700')
  // 给 logo 图标设置模式变化
  const chakraUI = useColorModeValue(chakraUILight, chakraUIDark)
  return <Box bgColor={bgColor} p={3} w="100%" boxShadow="lg" borderRadius="lg">
    {/* 选项卡最外层组件 isFitted 选项充满容器 */}
    <Tabs isFitted>
      <Image src={chakraUI} w="250px" mx="auto" mt="2" mb="6" />
      {/* 选项卡标题 */}
      <TabList>
        <Tab _focus={{boxShadow: 'none'}}>注册</Tab>
        <Tab _focus={{boxShadow: 'none'}}>登录</Tab>
      </TabList>
      {/* 选项卡标题对应的内容 */}
      <TabPanels>
        <TabPanel>
          <SignUp />
        </TabPanel>
        <TabPanel>
          <SignIn />
        </TabPanel>
      </TabPanels>
    </Tabs>
  </Box>
}